import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Icon, Input,Button,Upload,Popover } from 'antd';
import HeaderSearch from 'ant-design-pro/lib/HeaderSearch';
import styles from './styles.less';
const Search = Input.Search;
class Menus extends Component {
  static propTypes = {
    upload:PropTypes.func,
    newFolder:PropTypes.func,
    onSearch:PropTypes.func,
    uploadParams:PropTypes.instanceOf(Object)
  }
  state = {
    visible: false,
  }

  hide = () => {
    this.setState({
      visible: false,
    });
  }

  handleVisibleChange = (visible) => {
    this.setState({ visible });
  }

  render() {
    return (
        <div className="header-container">
          <div className="header-left">
            <Upload {...this.props.uploadParams||{}} style={{display:'inline-block'}}>
              <Button type="primary" style={{marginRight:20}}>
                <Icon type="upload" /> 上传文件
              </Button>
            </Upload>
            <Popover
              content={
                <Search
                  placeholder="请输入文件夹名称"
                  enterButton="新建"
                  onSearch={value => {
                    if (this.props.newFolder) this.props.newFolder(value);
                    this.hide();
                  }}
                />
              }
              title="新建文件夹"
              trigger="click"
              visible={this.state.visible}
              onVisibleChange={this.handleVisibleChange}
            >
              <Button><Icon type="folder-add" onclick={()=>this.setState({visible: true})}/>新建文件夹</Button>
            </Popover>
            
          </div>
          <div className="header-right">
            <Search
              placeholder="请输入文件关键词"
              onSearch={value => {
                if (this.props.onSearch) this.props.onSearch(value);
              }}
              enterButton
            />
          </div>
        </div>
      );
  }
}

export default Menus;
